<script lang="ts" setup>
defineOptions({
  name: 'AppVipRuleDesc',
})

const { vipRuleDetailData } = storeToRefs(useAppStore())

const rules = computed(() => {
  if (vipRuleDetailData.value && vipRuleDetailData.value.value) {
    const arr = JSON.parse(vipRuleDetailData.value.value) as { q: string }[]
    return arr.map(a => a.q.replace(/\n/g, '<br>'))
  }
  return []
})
</script>

<template>
  <div class="app-vip-rule-desc">
    <h6 class="text-xl font-semibold">
      {{ $t('vip_rules_des') }}
    </h6>
    <ul class="ml-4 mt-4 list-disc text-[#B3BEC1] text-sm">
      <li
        v-for="item, i in rules" :key="i" class="mb-4 font-medium last-of-type:mb-0"
        v-html="item"
      />
    </ul>
  </div>
</template>

<style>

</style>

<style lang="scss" scoped>
.app-vip-rule-desc {
  width: 100%;
  border-radius: 8px;
}
</style>
